<ion-header>
  <ion-navbar>
    <ion-title>
      Contact
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-list-header>Follow us on Twitter</ion-list-header>
    <ion-item>
      <ion-icon name="ionic" item-start></ion-icon>
      @ionicframework
    </ion-item>
  </ion-list>
  <hr>
  <div #video_box class="video-box">
    <video #video_element src="{{video_src}}"></video>
    <div #video_ctrl class="video-ctrl">
      <div class="btn-play-pause" [ngClass]="{pause: oVideo && oVideo.paused}" (click)="playOrPause()"></div>
      <div class="bottom-box">
        <div #download_btn class="download-btn btn">下载</div>
        <div class="progress-wrap">
          <div class="current time">{{video_currentTime}}</div>
          <div #progress_box class="progress-box">
            <!-- <div class="progress-bar" [ngStyle]="{width: video_progress + '%'}"> Angular 检测延迟 -->
            <div #buffer_bar class="buffer-bar bar"></div>
            <div #progress_bar class="progress-bar bar">
              <i #progress_ctl></i>
            </div>
          </div>
          <div class="duration time">{{video_duration}}</div>
        </div>
        <div #full_screen class="full-screen btn">全屏</div>
      </div>
    </div>
  </div>
  <div #download_box class="download-box">
    <div class="download-percent">{{download_percent}} %</div>
    <div class="download-directory" (click)="openDownloadDirectory()">打开下载目录</div>
  </div>
  <div class="download-path">下载目录 {{download_path}}</div>
</ion-content>